<template>
    <div class="professor_zjxx">
       <!-- <router-view/>-->
        <div class="layout">
            <div class="table">              
                <div>
                    <div>
						<h3>专家&nbsp;信息</h3>
						<el-divider></el-divider>
					</div>
					
					
					
  <div cclass="hello" style="float: left;padding-left:300px;">
<el-tag>姓名</el-tag><br>
<el-tag  type="success">性别</el-tag><br>
<el-tag type="info">生日</el-tag><br>
<el-tag type="warning">民族</el-tag><br>
<el-tag type="danger">婚嫁</el-tag><br>
<el-tag>手机</el-tag><br>
<el-tag  type="success">户籍</el-tag><br>
<el-tag  type="success">身份</el-tag><br>
<el-tag  type="success">邮箱</el-tag><br>


  </div>
  <div style="float: right;padding-right:300px;">
	  <span>{{personal.realname}}</span><br>
	  <span>{{personal.sex}}</span><br>
	  <span>{{personal.birthday}}</span><br>
	  <span>{{personal.nation}}</span><br>
	  <span>{{personal.marriage}}</span><br>
	  <span>{{personal.mobile}}</span><br>
	  <span>{{personal.houseAddress}}</span><br>
	  <span>{{personal.card}}</span><br>
	  <span>{{personal.email}}</span><br>
	  <br>
<el-button type="button" @click="editShow()">修改信息</el-button>


<el-dialog
  title="专家个人信息"
  :visible.sync="dialogVisible"
  width="30%"
  :before-close="handleClose">
  <span slot="footer" class="dialog-footer">	
	
	    <el-form>
	      <el-form-item label="姓名" :label-width="formLabelWidth">
	        <el-input
	          placeholder="请输入真实"
	          v-model="personal.realname"
	          autocomplete="off"
	        ></el-input>
	      </el-form-item>       
	      <el-form-item label="性别" :label-width="formLabelWidth">
	        <el-input
	          placeholder="请输入性别"
	          v-model="personal.sex"
	          autocomplete="off"
	        ></el-input>
	      </el-form-item>
	      <el-form-item label="生日" :label-width="formLabelWidth">
	        <el-input
	          placeholder="请输入生日"
	          v-model="personal.birthday"
	          autocomplete="off"
	        ></el-input>
	      </el-form-item>

	  <el-form-item label="民族" :label-width="formLabelWidth">
	    <el-input
	      placeholder="请输入民族"
	      v-model="personal.nation"
	      autocomplete="off"
	    ></el-input>
	  </el-form-item>
	  <el-form-item label="婚嫁" :label-width="formLabelWidth">
	    <el-input
	      placeholder="请输入婚姻状态"
	      v-model="personal.marriage"
	      autocomplete="off"
	    ></el-input>
	  </el-form-item>
	  <el-form-item label="手机" :label-width="formLabelWidth">
	    <el-input
	      placeholder="请输入手机号码"
	      v-model="personal.mobile"
	      autocomplete="off"
	    ></el-input>
	  </el-form-item>
	  <el-form-item label="户籍" :label-width="formLabelWidth">
	    <el-input
	      placeholder="请输入户籍所在地"
	      v-model="personal.houseAddress"
	      autocomplete="off"
	    ></el-input>
	  </el-form-item>
	  <el-form-item label="身份" :label-width="formLabelWidth">
	    <el-input
	      placeholder="请输入身份证号"
	      v-model="personal.card"
	      autocomplete="off"
	    ></el-input>
	  </el-form-item>
	  <el-form-item label="邮箱" :label-width="formLabelWidth">
	    <el-input
	      placeholder="邮箱地址"
	      v-model="personal.email"
	      autocomplete="off"
	    ></el-input>
	  </el-form-item>
	  
	    </el-form>
	  
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="edit()">确 定</el-button>
  </span>
</el-dialog>
    </div>
	  	  
  </div>
  
  
  
                </div>
            </div>
        </div>					
    </div>
</template>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script>
import axios from 'axios';
export default {	
    data() {		
      return {
		personal:{
			realname:"关道伟",
			sex:"男",
			birthday:"2000.03",
			nation:"汉",
			marriage:"未婚",
			mobile:"119",
			houseAddress:"河南省",
			card:"410326",
			email:"@qq.com"
		},
		user_account:103,
		dialogVisible:false,
		formLabelWidth:50+"px"
      }
    },
	mounted() {
		this.list()
	},
    methods: {
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
	  list:function(){
		  axios.get("http://localhost:9001/users-personal/list",{
			  params:{
				  user_account:this.user_account
			  }			  
		  }).then((response)=>{			 
			  this.personal=response.data[0];
		  })
	  },
	  editShow:function(){
		 this.dialogVisible = true
	  },
	  edit:function(){
		  this.dialogVisible = false;
		  axios.post('http://localhost:9001/users-personal/update',{
				id:this.user_account,
				userAccount:this.user_account,
				face:"0",
		  		realname:this.personal.realname,
		  		sex:this.personal.sex,
		  		birthday:this.personal.birthday,
		  		nation:this.personal.nation,
				marriage:this.personal.marriage,
		  		mobile:this.personal.mobile,
		  		houseAddress:this.personal.houseAddress,
				card:this.personal.card,
				email:this.personal.email
		  	},function(data){
				 console.log(data.data),
				this.list();
		  	}
		  );
	  }
	  
    }
  };
</script>

<style scoped>
    h2,h3{
        width: 150px;
        margin: 20px auto;
    }
    .professor_zjxx{
        width: 100%;
        height: 100%;
    }
    .layout{
        width: 100%;
        height: 100%;
    }
    .table{
        width: calc(100% - 100px);
        margin: 0 50px;
        padding: 0 10px;
        height: 100%;
        border: 1px solid #000;
        background-color: #EFEFEF;
    }
    .one{
        width: calc(100% - 40px);
        height: 50px;
        display: flex;
        margin: 20px;
        align-items: center;
        background-color: #ffffff;
        border: 1px solid #000;
    }
    .one input{
        margin: 0 20px;
    }
    .two{
        width: 100%;
    }
</style>